<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title></title>
	<style>
		body
		{
			font-size: 9pt;
		}
		#info{
			border:1px solid #000000;
						
		}
		#btn_target{
			width:300px;
			height:100px;
		} 
	</style>
	<script>
		var info;
		var btnTarget;
		window.onload=function(){
			/*
				이벤트 제거, 등록.
			*/
			info = window.document.getElementById("info");
			btnTarget = window.document.getElementById("btn_target");		
		}
		
		
		function on_ClickAdd(e){
			addInfo("mouseover 이벤트 리스너 등록, 이제부터 mouseover이벤트 리스너가 실행됩니다.");				
			// 이벤트 추가.
			btnTarget.attachEvent("onmouseover",on_MouseOver);	
		}
		
		function on_ClickRemove(e){
			addInfo("mouseover 이벤트 리스너 삭제, 더이상 mouseover 이벤트 리스너가 실행되지 않습니다.");			
			// 이벤트 삭제	
			btnTarget.detachEvent("onmouseover", on_MouseOver);
		}
		
		function on_MouseOver(e){
			addInfo("mouseOver");
		}
		
		function addInfo(str){
			info.innerHTML += str+"<br>";
		}
	</script>
</head>

<body>
	<button onClick="on_ClickAdd(event)" id="btn_1">이벤트발생</button>
	<button onClick="on_ClickRemove(event)">이벤트제거</button>
    <div>
       	<button id="btn_target">이곳에 마우스를 올려보세요.</button>
    </div>
    <div id="info">이곳에 이벤트 이벤트 정보가 출력됩니다.<br></div>
</body>
</html>
